<template>
  <div class="delete-confirm-wrap">
    <div class="mask" @click="maskClick"></div>
    <el-dialog title="提示" center width="400px" :visible="true" @close="close">
      <div :style="{'textAlign':'center'}">确定删除此条选项?</div>
      <div :style="{'textAlign':'center','color':'red'}">对应库存信息将全部清空!</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delClose">取 消</el-button>
          <el-button type="primary" @click="delConfirm">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Prop, Emit, Component } from 'vue-property-decorator';
@Component({})
export default class DeleteConfirm extends Vue {
  @Emit('closeDelete')
  maskClick() {}
  @Emit('closeDelete')
  delClose() {}
  @Emit('closeDelete')
  close() {}
  @Emit('deleteConfirm')
  delConfirm() {}
}
</script>

<style lang="less">
.delete-confirm-wrap {
  z-index: 2000;
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    // background-color: rgba(0, 0, 0, 0.3);
  }
  .img-card {
    // position: fixed;
    width: 500px;
    height: 500px;
    // left: 50%;
    // top: 50%;
    // transform: translate(-150px, -210px);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 104;
    background-color: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    .pop-pic {
      z-index: 104;
      height: 100%;
      width: 100%;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
    }
    .el-icon-close {
      font-size: 24px;
      padding: 3px;
      color: #000;
    }
    .icon-wrap {
      background-color: #fff;
      border-radius: 50%;
      position: absolute;
      top: -10px;
      right: -10px;
    }
  }
}
</style>
